<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>ui5-media-gallery</title>


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<link rel="stylesheet" type="text/css" href="./styles/MediaGallery.css">

</head>

<body style="background-color: var(--sapBackgroundColor);">
		<div class="controls layout">
			<ui5-label>Switch theme: </ui5-label>
			<ui5-select id="selectTheme">
				<ui5-option value="sap_fiori_3">Fiori 3</ui5-option>
				<ui5-option value="sap_fiori_3_dark">Fiori 3 Dark</ui5-option>
				<ui5-option value="sap_fiori_3_hcb">Fiori 3 HCB</ui5-option>
				<ui5-option value="sap_fiori_3_hcw">Fiori 3 HCW</ui5-option>
				<ui5-option value="sap_horizon">Horizon</ui5-option>
			</ui5-select>
		</div>

		<div class="controls layout">
			<ui5-title level="H1">Layout preferences:</ui5-title>

			<div>
				<ui5-label>Layout: </ui5-label>
				<ui5-select id="layout">
					<ui5-option selected>Auto</ui5-option>
					<ui5-option>Vertical</ui5-option>
					<ui5-option>Horizontal</ui5-option>
				</ui5-select>
			</div>
			<ui5-title level="H3">Thumbnails menu:</ui5-title>
			<div>
				<ui5-checkbox id="selectMenuDesign" text="Show all thumbnails"></ui5-checkbox>
			</div>
			<div>
				<ui5-label>Menu horizontal align: </ui5-label>
				<ui5-select id="selectHorizontalAlign">
					<ui5-option>Right</ui5-option>
					<ui5-option selected>Left</ui5-option>
				</ui5-select>
			</div>
			<div>
				<ui5-label>Menu vertical align: </ui5-label>
				<ui5-select id="selectVerticalAlign">
					<ui5-option>Top</ui5-option>
					<ui5-option selected>Bottom</ui5-option>
				</ui5-select>
			</div>
		</div>
		<div class="content">
			<ui5-media-gallery id="mGallery1">
				<ui5-media-gallery-item>
					 <img src="./img/HT-1000.jpg">
					 <img src="./img/HT-1000.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item selected>
					<img src="./img/HT-1010.jpg">
					<img src="./img/HT-1010.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1022.jpg">
					<img src="./img/HT-1022.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item layout="Wide">
					<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					<img src="" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item layout="Wide">
					<iframe allowfullscreen src="https://www.youtube.com/embed/r2-XOMtsbT0?rel=0&showinfo=0&autoplay=1"></iframe>
					<img src="https://www.plustechnologies.com/wp-content/uploads/2019/03/SAP.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1030.jpg">
					<img src="./img/HT-1030.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/Overlayed mask.png">
					<img src="./img/Overlayed mask.png" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-2002.jpg">
					<img src="./img/HT-2002.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-2026.jpg">
					<img src="./img/HT-2026.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
			</ui5-media-gallery>
		</div>
		<div id="events" class="controls events">
			<ui5-title level="H1">Events:</ui5-title>
			<div>
				<ui5-checkbox id="isDisplayAreaInteractive" text="Interactive display area"></ui5-checkbox>
			</div>
			<div>
				<ui5-label>Last selected index: </ui5-label>
				<ui5-label class="resultLabel" id="selectedIndexLabel"></ui5-label>
			</div>
			<div>
				<ui5-label>Call count "selection-change": </ui5-label>
				<ui5-label class="resultLabel" id="selectionChangeCallCountLabel"></ui5-label>
				<button id="clearBtn">Clear</button>
			</div>
			<div>
				<ui5-label>Call count "overflow-click": </ui5-label>
				<ui5-label class="resultLabel" id="overflowClickCallCountLabel"></ui5-label>
			</div>
			<div>
				<ui5-label>Call count "display-area-click": </ui5-label>
				<ui5-label class="resultLabel" id="displayAreaClickCallCountLabel"></ui5-label>
			</div>
		</div>
		<div class="content">
			<ui5-media-gallery id="mGallery2">
				<ui5-media-gallery-item>
					 <img src="./img/HT-1000.jpg">
					 <img src="./img/HT-1000.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1010.jpg">
					<img src="./img/HT-1010.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1022.jpg">
					<img src="./img/HT-1022.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item layout="Wide">
					<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					<img src="" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-2002.jpg">
					<img src="./img/HT-2002.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1030.jpg">
					<img src="./img/HT-1030.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
			</ui5-media-gallery>
		</div>
		<div id="disableditems" class="controls">
			<ui5-title level="H2">MediaGallery with disabled items:</ui5-title>
		</div>
		<div class="content">
			<ui5-media-gallery>
				<ui5-media-gallery-item disabled>
					 <img src="./img/HT-1000.jpg">
					 <img src="./img/HT-1000.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1010.jpg">
					<img src="./img/HT-1010.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1022.jpg">
					<img src="./img/HT-1022.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item layout="Wide">
					<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					<img src="" slot="thumbnail">
				</ui5-media-gallery-item>
			</ui5-media-gallery>
		</div>
		<div id="notfoundcontent" class="controls">
			<ui5-title level="H2">Not found content:</ui5-title>
		</div>
		<div class="content">
			<ui5-media-gallery>
				<ui5-media-gallery-item>
					 <img src="./img/Tool1.png">
					 <img src="./img/HT-1000.jpg" slot="thumbnail">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item layout="Wide">
					<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					<img src="" slot="thumbnail">
				</ui5-media-gallery-item>
			</ui5-media-gallery>
		</div>
		<div id="notfoundthumbnail" class="controls">
			<ui5-title level="H2">Not found thumbnail and content:</ui5-title>
		</div>
		<div class="content">
			<ui5-media-gallery>
				<ui5-media-gallery-item>
					 <img src="./img/HT-10001.jpg">
					 <img src="./img/Tool1.png" slot="thumbnail">
				</ui5-media-gallery-item>
			</ui5-media-gallery>
		</div>

		<div class="controls">
			<ui5-title level="H2">Narrow container</ui5-title>
		</div>
		<div class="narrowContainer">
			<ui5-media-gallery id="galleryInNarrowContainer">
				<ui5-media-gallery-item>
					 <img src="./img/HT-1000.jpg">
				</ui5-media-gallery-item>
				<ui5-media-gallery-item>
					<img src="./img/HT-1010.jpg">
				</ui5-media-gallery-item>
			</ui5-media-gallery>
		</div>

	<script>

		let selectionChangeCallCount = 0,
		overflowClickCallCount = 0,
		displayAreaClickCallCount = 0;

		layout.addEventListener("ui5-change", function(event) {
			let newValue = event.detail.selectedOption.innerText;
			mGallery1.layout = newValue;
		});

		selectHorizontalAlign.addEventListener("ui5-change", function(event) {
			let newValue = event.detail.selectedOption.innerText;
			mGallery1.menuHorizontalAlign = newValue;
		});

		selectVerticalAlign.addEventListener("ui5-change", function(event) {
			let newValue = event.detail.selectedOption.innerText;
			mGallery1.menuVerticalAlign = newValue;
		});

		isDisplayAreaInteractive.addEventListener("ui5-change", function(event) {
			mGallery2.interactiveDisplayArea = isDisplayAreaInteractive.checked;
		});

		mGallery2.addEventListener("ui5-selection-change", function(event) {
			const item = event.detail.item,
				index = mGallery2.items.indexOf(item);
				selectedIndexLabel.innerText = index;
				selectionChangeCallCountLabel.innerText = ++selectionChangeCallCount;
		});

		mGallery2.addEventListener("ui5-overflow-click", function(event) {
			overflowClickCallCountLabel.innerText = ++overflowClickCallCount;
		});

		mGallery2.addEventListener("ui5-display-area-click", function(event) {
			displayAreaClickCallCountLabel.innerText = ++displayAreaClickCallCount;
		});

		selectMenuDesign.addEventListener("ui5-change", function(event) {
			mGallery1.showAllThumbnails = selectMenuDesign.checked;
		});

		clearBtn.addEventListener("click", function() {
			selectedIndexLabel.innerText = "";
			selectionChangeCallCountLabel.innerText = "";
			overflowClickCallCountLabel.innerText = "";
			displayAreaClickCallCountLabel.innerText = "";
		});

		selectTheme.addEventListener("ui5-change", function(event) {
			var theme = event.detail.selectedOption.value;
			var Conf = window["sap-ui-webcomponents-bundle"].configuration;
			Conf.setTheme(theme);
		});

	</script>
</body>

</html>
